<!--
 * @Date         : 2023-11-16 23:00:54
 * @LastEditTime : 2023-11-16 23:18:11
 * @description  : 
-->
<template>
  <view class="link">
    <div class="header">
      <div class="title">综合素养图</div>
      <div class="echart-style">
        <uni-ec-canvas
          class="uni-ec-canvas"
          id="uni-ec-canvas"
          ref="uni-ec-canvas"
          canvas-id="uni-ec-canvas"
          :ec="ec"
          @inited="inited"
        ></uni-ec-canvas>
      </div>
    </div>
  </view>
</template>
<script>
// 此处将路径替换为你放置该组件的路径
import uniEcCanvas from "@/components/echarts-for-wx-uniapp-1.0.2/uni-ec-canvas/uni-ec-canvas.vue";
let data = [582, 421.2, 622.1, 625.3, 265, 224];
let indicator = [
  {
    name: "学习时长",
    max: 1000,
  },
  {
    name: "线下活动参与",
    max: 1000,
  },
  {
    name: "线上艺术家",
    max: 1000,
  },
  {
    name: "志愿者参与",
    max: 1000,
  },
  {
    name: "套餐5",
    max: 1000,
  },
  {
    name: "套餐6",
    max: 1000,
  },
];
export default {
  data() {
    return {
      ec: {
        option: {
          radar: {
            center: ["50%", "50%"],
            radius: "75%",
            name: {
              formatter: function (name, indicator) {
                let arr;
                //   if(name=='开卡绑定数'||name=='渠道批量办理业务'){
                //         arr = [
                //         '{a|'+name+'}{b|'+indicator.value+'万}'
                //     ]
                //   }else{
                arr = ["{a|" + name + "}"];
                //   }

                return arr.join("\n");
              },
              textStyle: {
                rich: {
                  //根据文字的组设置格式
                  a: {
                    color: "#BCDCFF",
                    fontSize: 14,
                    fontWeight: 600,
                    fontFamily: "Source Han Sans CN",
                  },
                  // b:{
                  //     fontSize:14,
                  //     verticalAlign:'top',
                  //     width:57,
                  //     color:'#8E88FE',
                  //     fontWeight:600,
                  //     align:'center'
                  // },
                },
              },
            },
            nameGap: 0,
            indicator: indicator,
            splitLine: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          series: [
            {
              // name: '家庭融合包',
              type: "radar",
              data: [data],
              // value:14,
              label: {
                show: true,
                formatter: function (params) {
                  console.log(params);
                  return params.value + "万";
                },
                color: "#8E88FE",
                // position:[-20,-10,-10,-10],
                align: "right",
                distance: 10,
                align: "right",
              },
              symbolSize: [6, 6],
              lineStyle: {
                //边缘颜色
                width: 0,
              },
              itemStyle: {
                borderWidth: 1,
                color: "#fff",
                borderColor: "#F2F063",
              },
              areaStyle: {
                color: "#7D77F1",
                opacity: 0.6,
              },
            },
            {
              type: "radar",
              data: [[1000, 1000, 1000, 1000, 1000, 1000]],
              symbol: "none",
              lineStyle: {
                width: 0,
              },
              itemStyle: {
                color: "#4175F5",
              },

              areaStyle: {
                color: "#4175F5",
                opacity: 0.06,
              },
            },
            {
              type: "radar",
              data: [[900, 900, 900, 900, 900, 900]],

              symbol: "none",
              lineStyle: {
                width: 0,
              },
              itemStyle: {
                color: "#2C72C8",
              },

              areaStyle: {
                color: "#2C72C8",
                opacity: 0.12,
              },
            },
            {
              type: "radar",
              data: [[800, 800, 800, 800, 800, 800]],

              symbol: "none",
              lineStyle: {
                width: 0,
              },
              itemStyle: {
                color: "#4175F5",
              },

              areaStyle: {
                color: "#4175F5",
                opacity: 0.18,
              },
            },
            {
              type: "radar",
              data: [[700, 700, 700, 700, 700, 700]],

              symbol: "none",
              lineStyle: {
                width: 0,
              },
              itemStyle: {
                color: "#4175F5",
              },

              areaStyle: {
                color: "#4175F5",
                opacity: 0.19,
              },
            },
            {
              type: "radar",
              data: [[600, 600, 600, 600, 600, 600]],

              symbol: "none",
              lineStyle: {
                width: 0,
              },
              itemStyle: {
                color: "#4175F5",
              },

              areaStyle: {
                color: "#4175F5",
                opacity: 0.17,
              },
            },
            {
              type: "radar",
              data: [[500, 500, 500, 500, 500, 500]],
              symbol: "none",
              lineStyle: {
                width: 0,
              },
              itemStyle: {
                color: "#4175F5",
              },

              areaStyle: {
                color: "#4175F5",
                opacity: 0.16,
              },
            },
            {
              type: "radar",
              data: [[400, 400, 400, 400, 400, 400]],

              symbol: "none",
              lineStyle: {
                width: 0,
              },
              itemStyle: {
                color: "#4175F5",
              },

              areaStyle: {
                color: "#4175F5",
                opacity: 0.13,
              },
            },
          ],
        },
      },
    };
  },
  components: {
    uniEcCanvas,
  },
  methods: {
    inited(chart) {
      console.log("图表初始化完毕");
      console.log("chart实例", chart);
    },
  },
};
</script>
<style lang="scss">
.link {
  width: 100%;
  height: 100vh;
  background: #eeeeee;
  overflow: auto;
  .header {
    width: 690rpx;
    // height: 532rpx;
    box-sizing: border-box;
    padding: 30rpx;
    background: #fff;
    border-radius: 20rpx;
    margin: 30rpx auto;
    .title {
      height: 45rpx;
      font-weight: bold;
      color: #e04411;
      text-align: center;
    }
    .echart-style {
      width: 389rpx;
      height: 389rpx;
      margin: 0 auto;
      margin-top: 20rpx;
    }
  }
}
.uni-ec-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
